<template>
  <div class="Echarts">
    <div :id="chartData.name" style="width: 100px; height: 90px" />
  </div>
</template>

<script lang="ts" setup>
import { init } from "echarts";
import { onMounted, watch } from "vue";
type Prop = {
  chartData?: any;
  index?: number;
};

const props = defineProps<Prop>();
const loadColor = index => {
  const colors = [
    "#fee82c",
    "#abcd2c",
    "#db2d45",
    "#cd4d89",
    "#1491d1",
    "#f17f43",
    "#108774",
    "#7c4899",
    "#282a88",
    "#008B8B",
    "#90EE90",
    "#8B0000"
  ];
  return colors[index];
};

const initCharts = (index: number = 0) => {
  let myChart = init(document.getElementById(props.chartData.name));
  let option = {
    tooltip: {
      trigger: "item"
    },
    series: [
      {
        type: "pie",
        radius: ["40%", "70%"],
        avoidLabelOverlap: false,
        label: {
          show: false,
          position: "center"
        },
        emphasis: {
          label: {
            show: false
          }
        },
        labelLine: {
          show: false
        },
        tooltip: {
          show: false
        },
        data: props.chartData.data,
        itemStyle: {
          color: loadColor(index)
        }
      }
    ]
  };
  myChart.setOption(option);
};

watch(
  () => props.chartData,
  () => {
    initCharts(props.index);
  },
  { deep: true }
);

watch(
  () => props.index,
  () => {
    initCharts(props.index);
  }
);

onMounted(() => {
  initCharts(props.index ?? 0);
});
</script>

<style scoped></style>
